<template>
  <div class="driverList">
      <div class="driverListNavBar">
          <van-nav-bar title="司机列表" right-text="添加" :border="false"  @click-right="showalert">
          </van-nav-bar>
      </div>
      <div class="driverListInfo" v-for="(driver,ass) in driver" :key="ass">
            <div class="driverLeft">
                <img :src="driver.images" alt>
            </div>
            <div class="driveRight">
                <div class="driveRightHand">
                    <span class="driveName">{{driver.name}}</span>
                </div>
                <div class="driveRightButtom">
                    <span class="drivePhone">{{driver.phone}}</span>
                </div>
          </div>
              <van-button color="#00C657" class="driverdelete">删除</van-button>
      </div>
          <van-dialog 
            v-model="addshow" 
            title="添加司机" 
            :show-cancel-button="true"
            confirm-button-text="确认接单"
            confirm-button-color="#00C657"
            cancel-button-color="red"
            >
            <van-field v-model="tel" type="tel" placeholder="请输入司机手机号" class="drivertel"/>
            <div class="buttomDriver" v-for="(newdriver,newd) in driver" :key="newd">
                <div class="addDriverLeft">
                    <img :src="newdriver.images">
                </div>
                <div class="addDriveRight">
                    <div class="addDriveRightname">
                        <span class="newdriverName">{{newdriver.name}}</span>
                    </div>
                    <div class="addDriveRightPhone">
                        <span class="newdriverPhoen">{{newdriver.phone}}</span>
                    </div>
                </div>
            </div>
          </van-dialog>
  </div>
</template>

<script>
export default {
    name:"driverList",
    data(){
        return{
            tel:'',
            addshow: false,
            driver:[],
        }
    },
    methods:{
        showalert(){
            this.addshow =! this.addshow;
            console.log("添加司机");
        }
    }
}
</script>

<style scoped>
*{
    padding:0;
    margin: 0;
}
.driverListInfo{
    display: flex;
    margin-top: 30px;
    background-color: #fff;
    margin-left: 24px;
}
.driverLeft{
    /* flex: 1; */
}
.driveRight{
    /* flex: 1; */
    margin-left: 11px;
}
.driverLeft img{
    height: 45px;
    width: 45px;
    border-radius: 30px;
    vertical-align: top;
    display: inline;
}
.driveName{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);   
    vertical-align: top;
}
.drivePhone{
    font-size:10px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(169,174,192,1);
    display: inline-block;
    vertical-align:bottom;
    margin-top: 5px;
}
.driverdelete{
    width: 70px;
    height:27px;
    background:rgba(0,198,87,1);
    border-radius:3px;
    font-size: 10px;
    margin-left: 100px;
    vertical-align: middle;
    margin-top: 5px;
}
.drivertel{
    padding-left: 30px;
    margin-top: 15px;
}
.buttomDriver{
    margin-top: 20px;
    display: flex;
}
.buttomDriver img{
    height: 45px;
    width: 45px;
    border-radius: 30px;
    vertical-align: middle;
    display: inline;
    margin-top: 10px;
    margin-left: 15px;
}
.addDriveRight{
    margin-left: 10px;
    margin-top: 10px;
}
.newdriverName{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:20px;
    vertical-align: middle;
}
.newdriverPhoen{
    font-size:10px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(169,174,192,1);
    line-height:20px;
    vertical-align: text-bottom;
}
</style>